<template>
	<view>
		<view v-for="(item,index) in province" :key="item.id">
			<view class="search-list" @click.native="selectItem(item)">
				<view class="search-item">
					<view class="item-top">
						<view class="iconfont"
							:class="[item.checked?'icon-app-duoxuanyixuan select-bg':'icon-app-duoxuanweixuan unselect-bg']">
						</view>
						<view class="item-txt">
							{{item.deptName}}
						</view>
					</view>
				</view>
			</view>
			<view class="child-item" v-for="(it,inx) in province[index].children" :key="it.id">
				<view class="search-item"  @click.native="selectItem(it)">
					<view class="item-top">
						<view class="iconfont"
							:class="[it.checked?'icon-app-duoxuanyixuan select-bg':'icon-app-duoxuanweixuan unselect-bg']">
						</view>
						<view class="item-txt">
							{{it.deptName}}
						</view>
					</view>
				</view>
				<view class="child-item-item" v-for="ix in province[index].children[inx].children" :key="ix.id" @click.native="selectItem(ix)">
					<view class="search-item">
						<view class="item-top">
							<view class="iconfont"
								:class="[ix.checked?'icon-app-duoxuanyixuan select-bg':'icon-app-duoxuanweixuan unselect-bg']">
							</view>
							<view class="item-txt">
								{{ix.deptName}}
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<view class="clear-bottom"></view>
		<view class="btn-bottom2">
			<!-- <view class="btn-left">

			</view> -->
			<view class="btn-right" @click="confirmChange">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				province: [],
				selectIds: ''
			}
		},
		onLoad(options) {
			this.getList();
			if (options) {
				this.selectIds = options.selectIds
			}
		},
		methods: {

			selectItem(item) {
				item.checked = !item.checked;
			},
			getList() {
				uni.$u.http.get(`/base/mobile/sysDeptInfo/deptTreeList`).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							item.checked = false
							this.selectIds.split(',').map(i => {
								if (item.id === i) {
									item.checked = true
								}
							})
							if (item.children) {
								item.children.map(it => {
									it.checked = false
									this.selectIds.split(',').map(i => {
										if (it.id === i) {
											it.checked = true
										}
									})
									if (it.children) {
										it.children.map(ix => {
											ix.checked = false
											this.selectIds.split(',').map(i => {
												if (ix.id === i) {
													ix.checked = true
												}
											})
										})
									}
								})
							}
						})
						this.province = res.data
					}
				})
			},
			//确定按钮
			confirmChange() {
				let arr = []
				this.province.map(item => {
					if (item.checked) {
						arr.push(item)
					}
					if (item.children) {
						item.children.map(it => {
							if (it.checked) {
								arr.push(it)
							}
							if(it.children){
								it.children.map(ix=>{
									if(ix.checked){
										arr.push(ix)
									}
								})
							}
						})
					}

				})
				if (!arr.length) return uni.$u.toast('请至少选择一个部门')

				setTimeout(() => {
					uni.$emit('setBumenList', arr);
					uni.navigateBack({
						delta: 1 //返回层数，2则上上页
					});
				}, 500)

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #ffffff;
	}

	.top-title {
		padding: 14rpx 30rpx;
	}

	.child-item {
		background: #fff;
		margin-top: 2rpx;


		.search-item {
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;
				padding-left: 40rpx;

				.unselect-bg {
					margin-right: 20rpx;
					color: #f1f1f1;
					font-size: 40rpx;
				}

				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 40rpx;
				}

				.item-txt {
					padding: 20rpx 0 20rpx 10rpx;
					display: flex;
					width: 100%;
					font-size: 30rpx;
				}
			}
		}
		.child-item-item{
			.item-top {
				display: flex;
				align-items: center;
				padding-left: 80rpx;
			
				.unselect-bg {
					margin-right: 20rpx;
					color: #f1f1f1;
					font-size: 40rpx;
				}
			
				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 40rpx;
				}
			
				.item-txt {
					padding: 20rpx 0 20rpx 10rpx;
					display: flex;
					width: 100%;
					font-size: 30rpx;
				}
			}
		}
	}

	.search-list {
		background: #fff;
		margin-top: 2rpx;


		.search-item {
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;


				.unselect-bg {
					margin-right: 20rpx;
					color: #f1f1f1;
					font-size: 48rpx;
				}

				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 48rpx;
				}

				.item-txt {
					padding: 20rpx 0 20rpx 10rpx;
					display: flex;
					width: 100%;
				}
			}
		}
	}

	.clear-bottom {
		width: 100%;
		height: 120rpx;
	}

	// .btn-bottom {
	// 	width: 100%;
	// 	height: 120rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	position: fixed;
	// 	bottom: 0;
	// 	background: #f2f2f2;

	// 	.btn-left {
	// 		margin-left: 30rpx;
	// 		font-size: 28rpx;
	// 		color: #000000;
	// 	}

	// 	.btn-right {
	// 		margin-right: 30rpx;
	// 		font-size: 34rpx;
	// 		color: #ffffff;
	// 		background: #0F53AC;
	// 		border-radius: 12rpx;
	// 		padding: 20rpx 60rpx;
	// 	}

	// }
</style>
